<template>
  <div v-if="isShow" class="px-4 w-full md:w-[60%] md:-translate-x-[50%] fixed bottom-[62px] md:left-[50%] z-[999]">
    <div
      class="w-full bg-[rgb(var(--v-theme-background))] shadow-md border flex justify-between rounded-full items-center"
    >
      <div class="flex items-center gap-x-4">
        <button class="bg-black p-2 rounded-full" @click="toPlay">
          <div class="play-circle"></div>
        </button>

        <div class="text-title">
          {{ title }}
        </div>
      </div>

      <div class="flex items-center">
        <div>
          <v-btn icon variant="text" @click="play">
            <j-icon :size="40">
              {{ playView.playstate }}
            </j-icon>
          </v-btn>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="bottom-player">
import { computed } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { PLAYNEWPAGENAME } from "@/utils/constant";

const store = useStore();
const router = useRouter();

const playView = computed(() => {
  return store.getters.playView;
});
const audio = computed(() => {
  return store.getters.audio;
});
const title = computed(() => {
  const { xuhao, mulu } = store.state.audio.info || {};
  return `${xuhao}.${mulu}`;
});
const info = computed(() => {
  return store.state.audio.info;
});

const getPaused = computed(() => {
  return store.state.audio.paused;
});

const isShow = computed(() => {
  return Object.keys(info.value).length > 0;
});

function play() {
  if (audio.value.paused) {
    audio.value.play();
  } else {
    audio.value.pause();
  }
}

function toPlay() {
  router.push({
    name: PLAYNEWPAGENAME,
    params: {
      id: info.value._id,
      type: "shiji",
      gedanid: info.value.shijiIndex,
    },
    query: {
      from: router.currentRoute.value.fullPath,
    },
  });
}
</script>

<style scoped lang="scss">
$size: 42px;

.play-circle {
  width: $size;
  height: $size;
  background: var(--v-bg-img-url) no-repeat;
  background-position: left;
  background-size: cover;
  border-radius: 9999px;
}
</style>
